<template>
  <view class="popup flex-center flex-align-items">
    <view class="main">
      <image :src="`${config.imgPath}/close1.png`" class="close" @click="close"></image>
      <image :src="poster" class="poster"></image>
      <view class="save font-28-B" @click="save">保存至相册</view>
    </view>
  </view>
</template>

<script setup>
import saveOrPreviewFile from '@/js/saveOrPreviewFile.js';
import config from '@/js/config.js';

const emits = defineEmits(['close']);
const props = defineProps({
  poster: {
    type: String,
    default: ''
  }
});

// 关闭弹窗
const close = () => {
  emits('close');
}
// 保存海报
const save = () => {
  saveOrPreviewFile.downloadFile(props.poster).then(res => {
    saveOrPreviewFile.saveImage(res.tempFilePath);
  });
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    width: 670rpx;

    .close {
      width: 64rpx;
      height: 64rpx;
    }

    .poster {
      width: 670rpx;
      height: 944rpx;
      margin: 40rpx 0;
    }

    .save {
      width: 534rpx;
      height: 88rpx;
      background: rgba(255, 255, 255, 0.16);
      border-radius: 44rpx;
      border: 2rpx solid #fff;
      margin: 0 auto;
      text-align: center;
      line-height: 84rpx;
      color: #fff;
    }
  }
}
</style>